// animateImages.js

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有的图片元素
    var images = document.querySelectorAll('.content-with-image .image-section img');
    var animationDuration = 4000; // 每张图片显示的时间为4秒
    var animationDelay = 4000; // 每张图片之间的延迟时间为4秒
  
    // 定义一个函数来更新图片的透明度
    function updateImageOpacity(image, opacity) {
      image.style.opacity = opacity;
    }
  
    // 定义一个函数来启动动画
    function startAnimation(index) {
      var currentImage = images[index];
      var nextIndex = (index + 1) % images.length;
      var nextImage = images[nextIndex];
  
      // 隐藏下一个图片
      updateImageOpacity(nextImage, 0);
  
      // 显示当前图片
      function showCurrentImage() {
        updateImageOpacity(currentImage, 1);
      }
  
      // 隐藏当前图片
      function hideCurrentImage() {
        updateImageOpacity(currentImage, 0);
      }
  
      // 显示当前图片
      showCurrentImage();
  
      // 设置一个定时器，在动画持续时间后隐藏当前图片并显示下一张图片
      setTimeout(function() {
        hideCurrentImage();
        startAnimation(nextIndex); // 递归调用以显示下一张图片
      }, animationDuration);
    }
  
    // 启动动画
    startAnimation(0); // 从第一张图片开始
  });